<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    
    <b>q</b>
    <b>w</b>
    <b>e</b>
    <div class="box" abc="hello" title="这是title" src="world">
        <span>1</span>
        <!-- 这是注释1 -->
        <span>2</span>
        文本
        <span>3</span>
        <!-- 这是注释2 -->
        <!-- 这是注释3 -->
        <!-- 这是注释4 -->
    </div>
    <em>a</em>
    <em>b</em>
    <em>c</em>

</body>
<script>
    var box = document.querySelector(".box")
    // 所有子节点
    var child = box.childNodes;
    console.log(child);

    // 所有属性节点
    var attrs = box.attributes;
    console.log(attrs);

    // 第一个子节点
    console.log( box.firstChild );
    // 最后一个子节点
    console.log( box.lastChild );
    
    // 上一个兄弟节点
    console.log( box.previousSibling );
    // 下一个兄弟节点
    console.log( box.nextSibling );

    // 根节点
    console.log( document );
    console.log( box.ownerDocument );
    console.log( box.ownerDocument === document );

    console.log("==========")

    
    // 节点的过滤

    // 文本节点
    var text = child[6];
    // 注释节点
    var comment = child[3];
    // 元素节点
    var span = child[1];
    // 属性节点
    var attr = attrs[1];
    // 根节点
    var doc = document;

    console.log( text );
    console.log( typeof text );
    console.log( text.nodeType );       // 3
    console.log( text.nodeName );       // "#text"
    console.log( text.nodeValue );      // 文本内容
    
    console.log( comment );
    console.log( typeof comment );
    console.log( comment.nodeType );    // 8
    console.log( comment.nodeName );    // "#comment"
    console.log( comment.nodeValue );   // 注释内容
    
    console.log( span );
    console.log( typeof span );
    console.log( span.nodeType );       // 1
    console.log( span.nodeName );       // 大写的标签名
    console.log( span.nodeValue );      // null

    console.log( attr );
    console.log( typeof attr );
    console.log( attr.nodeType );       // 2
    console.log( attr.nodeName );       // 属性名
    console.log( attr.nodeValue );      // 属性值

    console.log( doc );
    console.log( typeof doc );
    console.log( doc.nodeType );        // 9
    console.log( doc.nodeName );        // "#document"
    console.log( doc.nodeValue );       // null

    console.log("=======");

    // 利用节点的属性，进行节点过滤
    for(var i=0;i<child.length;i++){
        if(child[i].nodeType === 8){
            console.log(child[i]);
        }
    }

</script>
</html>